<template>
  <div class="module">
    <search-list
      ref="moduleList"
      :api-url="$url.CmsModuleList"
      :option="searchOpt"
      :itemPerRow="8"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="title" label="模块名称"></el-table-column>
      <el-table-column prop="code" label="模块类型"></el-table-column>
      <!-- <el-table-column prop="client" label="平台类型">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['clientSl'](scope.row.client).label }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column prop="createdAt" label="创建时间" width="150px"></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="150px"></el-table-column>
      <el-table-column label="操作" v-if="!selectedMode">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="check(scope.row)">管理</el-button>
          </div>
        </template>
      </el-table-column>

      <div class="btn-after" slot="btn-after" slot-scope="scope" v-if="selectedMode">
        <el-button
          @click="$emit('select', scope.selectedData)"
          :disabled="scope.selectedData.length == 0"
        >
          选择这几个
        </el-button>
      </div>
      <div slot="btn-after" class="btn-after" slot-scope="scope" v-else>
        <el-button type="success" icon="el-icon-plus" @click="add">新增模块</el-button>
        <el-button
          type="danger"
          icon="el-icon-close"
          :disabled="scope.selectedData.length === 0"
          @click="del"
        >
          删除模块
        </el-button>
      </div>
    </search-list>
  </div>
</template>

<script>
  export default {
    props: {
      selectedMode: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        selectedData: [],
        searchOpt: [
          {
            type: 'clientSl',
            name: 'client',
            label: '平台类型',
          },
          {
            type: 'onlineSl',
            name: 'online',
            label: '在线状态',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '模块名称',
          },
        ],
      };
    },
    methods: {
      /**
       * 查看跳转
       */
      check(row) {
        const { id } = row;
        this.$tabs.open({ name: 'ModuleDetail', params: { id } });
      },
      /**
       * 新增
       */
      add() {
        this.$tabs.open({ name: 'ModuleDetail', query: { pid: this.id } });
      },
      /**
       * 删除选择的频道
       */
      del() {
        this.$confirm(
          `确认删除所选的 ${this.selectedData.length} 条数据? 删除之后无法恢复! 请谨慎操作`,
          {
            title: '删除',
            type: 'warning',
          },
        )
          .then(() => {
            return this.$service.CmsModuleDelete({
              moduleId: this.selectedData.map((data) => data.id).join(','),
            });
          })
          .then(() => {
            this.$message.success('删除成功');
            this.$refs['moduleList'].getList();
            this.selectedData = [];
          });
      },

      //  ======== Event ===========
      selectionChange(val) {
        this.selectedData = [...val];
      },
    },
  };
</script>
<style lang="less" scoped>
  .module {
  }
</style>
